<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<title></title>
	<script type="text/javascript" src="../js/jquery.3.2.1.js" ></script>
	<script src="../js/mui.min.js"></script>
	<link href="../css/mui.min.css" rel="stylesheet"/>
	<link rel="stylesheet" href="../css/css/new-fire.css">
	<link rel="stylesheet" href="../css/css/public.css">
	<script>
        mui.init();
	</script>

</head>
<body id="list">
<header class="mui-bar mui-bar-nav">
	<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
	<h1 class="mui-title">我的订单</h1>
</header>

<div class="banner" id="banner">
	<div class="pagNav" id="pagNav">
		<a class="cur" id="qb">全部</a>
		<a id="dfk">待付款</a>
		<a id="dfh">待发货</a>
		<a id="dsh">待收货</a>
		<a id="dpj">待评价</a>
	</div>
	<ul id="ul">
		<!--全部订单-->
		<li class="li" style="left:0">
			<div class="list_con">
				<div class="div">
					<div class="top clean">
						<div class="fk-1"><img src="../img/my/fk-1.png" alt=""></div>
						<p>芦苇微微文艺清新...</p>
						<p class="waiting">等待买家付款</p>
					</div>
					<div class="content clean">
						<div class="fk-2">
							<img src="../img/my/fk-2.png" alt="">
						</div>
						<div class="fk-right">
							<p>芦苇微微文艺格子连衣裙</p>
							<ul>
								<li>款式：<span>米黄色</span></li>
								<li>尺码：<span>L</span></li>

								<li>价格：<span class="price">￥123.0</span></li>
								<li>数量：<span>1</span></li>
							</ul>
						</div>


					</div>
					<div class="num clean">
						<p>共1件</p>
						<b>合计： <span>￥123.0</span></b>
					</div>
					<div class="fukuan clean">

						<div class="right">
							<form action="">
								<input class="qxdd" type="submit" value="取消订单"><input class="fukuan-1" type="submit" value="付款">
							</form>
						</div>
					</div>
				</div>
			</div>
		</li>
		<!--代付款-->
		<li class="li" style="left:100%">
			<div class="list_con">
				<div class="div">
					<div class="top clean">
						<div class="fk-1"><img src="../img/my/fk-1.png" alt=""></div>

						<p>芦苇微微文艺清新...</p>
						<p class="waiting">等待买家付款</p>
					</div>
					<div class="content clean">
						<div class="fk-2">
							<img src="../img/my/fk-2.png" alt="">
						</div>
						<div class="fk-right">
							<p>芦苇微微文艺格子连衣裙</p>
							<ul>
								<li>款式：<span>米黄色</span></li>
								<li>尺码：<span>L</span></li>

								<li>价格：<span class="price">￥123.0</span></li>
								<li>数量：<span>1</span></li>
							</ul>
						</div>


					</div>
					<div class="num clean">
						<p>共1件</p>
						<b>合计： <span>￥123.0</span></b>
					</div>
					<div class="fukuan clean">

						<div class="right">
							<form action="">
								<input class="qxdd" type="submit" value="取消订单"><input class="fukuan-1" type="submit" value="付款">
							</form>
						</div>
					</div>
				</div>
				<div class="div">
					<div class="top clean">
						<div class="fk-1"><img src="../img/my/fk-1.png" alt=""></div>

						<p>芦苇微微文艺清新...</p>
						<p class="waiting">等待买家付款</p>
					</div>
					<div class="content clean">
						<div class="fk-2">
							<img src="../img/my/fk-2.png" alt="">
						</div>
						<div class="fk-right">
							<p>芦苇微微文艺格子连衣裙</p>
							<ul>
								<li>款式：<span>米黄色</span></li>
								<li>尺码：<span>L</span></li>

								<li>价格：<span class="price">￥123.0</span></li>
								<li>数量：<span>1</span></li>
							</ul>
						</div>


					</div>
					<div class="num clean">
						<p>共1件</p>
						<b>合计： <span>￥123.0</span></b>
					</div>
					<div class="fukuan clean">

						<div class="right">
							<form action="">
								<input class="qxdd" type="submit" value="取消订单"><input class="fukuan-1" type="submit" value="付款">
							</form>
						</div>
					</div>
				</div>

			</div>
		</li>
		<!--代发货-->
		<li class="li" style="left:100%">
			<div class="list_con">
				<div class="div">
					<div class="top clean">
						<div class="fk-1"><img src="../img/my/fk-1.png" alt=""></div>

						<p>芦苇微微文艺清新...</p>
						<p class="waiting">等待买家付款</p>
					</div>
					<div class="content clean">
						<div class="fk-2">
							<img src="../img/my/fk-2.png" alt="">
						</div>
						<div class="fk-right">
							<p>芦苇微微文艺格子连衣裙</p>
							<ul>
								<li>款式：<span>米黄色</span></li>
								<li>尺码：<span>L</span></li>

								<li>价格：<span class="price">￥123.0</span></li>
								<li>数量：<span>1</span></li>
							</ul>
						</div>


					</div>
					<div class="num clean">
						<p>共1件</p>
						<b>合计： <span>￥123.0</span></b>
					</div>
					<div class="fukuan clean">

						<div class="right">
							<form action="">
								<input class="ycsh" type="submit" value="延迟收货"><input type="submit" id="wuliu1" value="查看物流">
								<input id="dingdanxq1" type="submit" value="确认收货">
							</form>
						</div>
					</div>
				</div>
				<div class="div">
					<div class="top clean">
						<div class="fk-1"><img src="../img/my/fk-1.png" alt=""></div>

						<p>芦苇微微文艺清新...</p>
						<p class="waiting">等待买家付款</p>
					</div>
					<div class="content clean">
						<div class="fk-2">
							<img src="../img/my/fk-2.png" alt="">
						</div>
						<div class="fk-right">
							<p>芦苇微微文艺格子连衣裙</p>
							<ul>
								<li>款式：<span>米黄色</span></li>
								<li>尺码：<span>L</span></li>

								<li>价格：<span class="price">￥123.0</span></li>
								<li>数量：<span>1</span></li>
							</ul>
						</div>


					</div>
					<div class="num clean">
						<p>共1件</p>
						<b>合计： <span>￥123.0</span></b>
					</div>
					<div class="fukuan clean">

						<div class="right">
							<form action="">
								<input class="ycsh" type="submit" value="延迟收货"><input type="submit" id="wuliu2" value="查看物流">
								<input id="dingdanxq" type="submit" value="确认收货">
							</form>
						</div>
					</div>
				</div>
				<div class="div">
					<div class="top clean">
						<div class="fk-1"><img src="../img/my/fk-1.png" alt=""></div>

						<p>芦苇微微文艺清新...</p>
						<p class="waiting">等待买家付款</p>
					</div>
					<div class="content clean">
						<div class="fk-2">
							<img src="../img/my/fk-2.png" alt="">
						</div>
						<div class="fk-right">
							<p>芦苇微微文艺格子连衣裙</p>
							<ul>
								<li>款式：<span>米黄色</span></li>
								<li>尺码：<span>L</span></li>

								<li>价格：<span class="price">￥123.0</span></li>
								<li>数量：<span>1</span></li>
							</ul>
						</div>


					</div>
					<div class="num clean">
						<p>共1件</p>
						<b>合计： <span>￥123.0</span></b>
					</div>
					<div class="fukuan clean">

						<div class="right">
							<form action="">
								<input class="ycsh" type="submit" value="延迟收货"><input type="submit" id="wuliu3" value="查看物流">
								<input id="dingdanxq2" type="submit" value="确认收货">
							</form>
						</div>
					</div>
				</div>
				<div class="div">
					<div class="top clean">
						<div class="fk-1"><img src="../img/my/fk-1.png" alt=""></div>

						<p>芦苇微微文艺清新...</p>
						<p class="waiting">等待买家付款</p>
					</div>
					<div class="content clean">
						<div class="fk-2">
							<img src="../img/my/fk-2.png" alt="">
						</div>
						<div class="fk-right">
							<p>芦苇微微文艺格子连衣裙</p>
							<ul>
								<li>款式：<span>米黄色</span></li>
								<li>尺码：<span>L</span></li>

								<li>价格：<span class="price">￥123.0</span></li>
								<li>数量：<span>1</span></li>
							</ul>
						</div>


					</div>
					<div class="num clean">
						<p>共1件</p>
						<b>合计： <span>￥123.0</span></b>
					</div>
					<div class="fukuan clean">

						<div class="right">
							<form action="">
								<input class="ycsh" type="submit" value="延迟收货"><input type="submit" id="wuliu4" value="查看物流">
								<input id="dingdanxq3" type="submit" value="确认收货">
							</form>
						</div>
					</div>
				</div>
				<div class="div">
					<div class="top clean">
						<div class="fk-1"><img src="../img/my/fk-1.png" alt=""></div>

						<p>芦苇微微文艺清新...</p>
						<p class="waiting">等待买家付款</p>
					</div>
					<div class="content clean">
						<div class="fk-2">
							<img src="../img/my/fk-2.png" alt="">
						</div>
						<div class="fk-right">
							<p>芦苇微微文艺格子连衣裙</p>
							<ul>
								<li>款式：<span>米黄色</span></li>
								<li>尺码：<span>L</span></li>

								<li>价格：<span class="price">￥123.0</span></li>
								<li>数量：<span>1</span></li>
							</ul>
						</div>


					</div>
					<div class="num clean">
						<p>共1件</p>
						<b>合计： <span>￥123.0</span></b>
					</div>
					<div class="fukuan clean">

						<div class="right">
							<!--<form action="">-->
								<input class="ycsh" type="submit" value="延迟收货"><input type="submit" id="wuliu5" value="查看物流">
								<input id="dingdanxq5" type="submit" value="确认收货">
							<!--</form>-->
						</div>
					</div>
				</div>
			</div>
		</li>
		<!--待收货-->
		<li class="li" style="left:100%">
			<div class="list_con">
				<div class="div">
					<div class="top clean">
						<div class="fk-1"><img src="../img/my/fk-1.png" alt=""></div>

						<p>芦苇微微文艺清新...</p>
						<p class="waiting">等待买家付款</p>
					</div>
					<div class="content clean">
						<div class="fk-2">
							<img src="../img/my/fk-2.png" alt="">
						</div>
						<div class="fk-right">
							<p>芦苇微微文艺格子连衣裙</p>
							<ul>
								<li>款式：<span>米黄色</span></li>
								<li>尺码：<span>L</span></li>

								<li>价格：<span class="price">￥123.0</span></li>
								<li>数量：<span>1</span></li>
							</ul>
						</div>


					</div>
					<div class="num clean">
						<p>共1件</p>
						<b>合计： <span>￥123.0</span></b>
					</div>
					<div class="fukuan clean">

						<div class="right">
							<!--<form  action="">-->
								<input id="wuliu41"  type="submit"  value="查看物流"><input type="submit" value="删除订单"><input type="button" id="qrsh" value="确认收货">
							<!--</form>-->
						</div>
					</div>
				</div>
			</div>
		</li>
		<!--待评价-->
		<li class="li" style="left:100%">
			<div class="list_con">
				<div class="div">
					<div class="top clean">
						<div class="fk-1"><img src="../img/my/fk-1.png" alt=""></div>

						<p>芦苇微微文艺清新...</p>
						<p class="waiting">等待买家付款</p>
					</div>
					<div class="content clean">
						<div class="fk-2">
							<img src="../img/my/fk-2.png" alt="">
						</div>
						<div class="fk-right">
							<p>芦苇微微文艺格子连衣裙</p>
							<ul>
								<li>款式：<span>米黄色</span></li>
								<li>尺码：<span>L</span></li>

								<li>价格：<span class="price">￥123.0</span></li>
								<li>数量：<span>1</span></li>
							</ul>
						</div>


					</div>
					<div class="num clean">
						<p>共1件</p>
						<b>合计： <span>￥123.0</span></b>
					</div>
					<div class="fukuan clean">

						<div class="right">
							<!--<form  action="">-->
								<input  type="submit"  value="查看物流"><input type="submit" value="删除订单"><input type="submit" value="评价">
							<!--</form>-->
						</div>
					</div>
				</div>
			</div>
		</li>
	</ul>
	<div class="left" id="left">&#xe69b;</div>
	<div class="right" id="right">&#xe69a;</div>
</div>
<script>
	document.getElementById("qrsh").addEventListener("tap",function(){
	        var main=mui.openWindow({
	            url:"qrsh.html",
	            id:"qrsh",
	            createNew:true,
	            show:{
	                aniShow:"slide-in-right",
	                duration:200
	            },
	            waiting:{
	                title:"正在加载..."
	            }
	        });
	    });
			document.getElementById("wuliu41").addEventListener("tap",function(){
	        var main=mui.openWindow({
	            url:"wuliu.html",
	            id:"wuliu-con",
	            createNew:true,
	            show:{
	                aniShow:"slide-in-right",
	                duration:200
	            },
	            waiting:{
	                title:"正在加载..."
	            }
	        });
	    });

    var banner=document.getElementById("banner");
    var Left=document.getElementById("left");
    var Right=document.getElementById("right");
    var Ul=document.getElementById("ul");
    var Li=Ul.getElementsByClassName("li");
    var pagNav=document.getElementById("pagNav");
    var n=0;
    var index=0;
    var v=0;
    var animated=false;
    var list_con=document.getElementsByClassName("list_con");

    var icon=pagNav.getElementsByTagName("a");
    for(var j=0;j<icon.length;j++){
        icon[j].index=j;
        icon[j].onclick=function(){
            if(animated){
                return
            }
            var y;
            y=(this.index-index)*(-100);
            n=this.index;

            animate2(y);
            showBtn();
            console.log(index+","+n);
        }

    }


    function showBtn(){

        for(var x= 0;x<icon.length;x++){
            if(icon[x].getAttribute("class")=="cur"){
                icon[x].className="";
            }
        }
        icon[index].className="cur";
        //        console.log(index);
    }
    Left.onclick=function(){
        if(animated){
            return
        }
        n--;
        if(n<0){
            n=Li.length-1;
        }
        Li[n].style.left="-100%";

        animate(100);
        index=n;

        list_con[n].style.height=document.getElementsByClassName("list_con")[n].clientHeight+"px";
//				list_con[n].style.height=1500+"px";
        Li[n].style.height=list_con[n].style.height;
        Ul.style.height=document.getElementsByClassName("list_con")[n].clientHeight+100+"px";
         banner.style.height=document.getElementsByClassName("list_con")[n].clientHeight+40+"px";
        showBtn();
    };
    Right.onclick=function(){
        if(animated){
            return
        }
        n++;
        if(n>Li.length-1){
            n=0;
        }
        Li[n].style.left="100%";
        animate(-100);
        index=n;
        console.log(n);
         list_con[n].style.height=document.getElementsByClassName("list_con")[n].clientHeight+"px";
//				list_con[n].style.height=1500+"px";
        Li[n].style.height=list_con[n].style.height;
        Ul.style.height=document.getElementsByClassName("list_con")[n].clientHeight+100+"px";
         banner.style.height=document.getElementsByClassName("list_con")[n].clientHeight+40+"px";
        console.log(list_con[n].style.height);
        console.log(Ul.style.height);
        showBtn();

    };
    function animate(offset){



        animated=true;
        var offset2=offset;

        if(offset2>0){
            offset2=100;
        }
        if(offset2<0){
            offset2=-100;
        }

        var speed=offset2/20;

        var go=function(){
            //            alert(n);
            if(speed<0&&parseInt(Li[n].style.left)>0||speed>0&&parseInt(Li[n].style.left)<0){
                Li[n].style.left=parseInt(Li[n].style.left)+speed+"%";
                if(speed<0&&n!=0){
                    Li[n-1].style.left=parseInt(Li[n-1].style.left)+speed+"%";
                }else if(speed<0&&n==0){
                    Li[Li.length-1].style.left=parseInt(Li[Li.length-1].style.left)+speed+"%";
                }else if(speed>0&&n==Li.length-1){
                    Li[0].style.left=parseInt(Li[0].style.left)+speed+"%";
                }else if(speed>0&&n!=Li.length-1){
                    Li[n+1].style.left=parseInt(Li[n+1].style.left)+speed+"%";
                }
                setTimeout(go,25);
            }else{
                if(index<n){
                    for(var w=0;w<n;w++){
                        Li[w].style.left="-100%";
                    }
                }
                if(index>n){
                    for(var w=index;w>n;w--){
                        Li[w].style.left="100%";
                    }
                }
                Li[n].style.left="0%";
                animated=false;
            }
        };
        go();

    }
    function animate2(offset){
        animated=true;
        var offset2=offset;
        if(offset2>0){
            offset2=100;
        }
        if(offset2<0){
            offset2=-100;
        }
        var speed=offset2/20;
        var go=function(){
//          console.log(index);
            if(speed<0&&parseInt(Li[n].style.left)>0||speed>0&&parseInt(Li[n].style.left)<0){
                Li[n].style.left=parseInt(Li[n].style.left)+speed+"%";
                Li[index].style.left=parseInt(Li[index].style.left)+speed+"%";

                setTimeout(go,25);
            }else{

                if(index<n){
                    for(var w=0;w<n;w++){
                        Li[w].style.left="-100%";
                    }
                }
                if(index>n){
                    for(var w=index;w>n;w--){
                        Li[w].style.left="100%";
                    }
                }


                Li[n].style.left="0%";
                animated=false;

                index=n;
                showBtn();

            }
        };
        go();
    }

    window.addEventListener("load",load);
    function load(e) {
        var a,b,c,d,e;
//		        e.preventDefault();
        document.addEventListener("touchstart",touch1);
        document.addEventListener("touchmove",touch1);
        document.addEventListener("touchend",touch1);
//		        Left.addEventListener("touchend",touch2);
//		        Right.addEventListener("touchend",touch3);
        for(var p=0;p<5;p++){
            icon[p].addEventListener("touchstart",touch_page);
        }
        function touch_page(){
            event=event||window.event;
            var con=document.getElementById("con");
            switch (event.type) {
                case "touchstart":
                    if (animated) {
                        return
                    }
                    var y;
                    y = (this.index - index) * (-100);
                    n = this.index;

                    animate2(y);

                    break;
            }
            //            alert(this.index);

        }

//		        function touch3() {
//		            Right.onclick();
//		        }
//		        function touch2() {
//		            Left.onclick();
//		        }
        function touch1(event){
            event=event||window.event;
            var con=document.getElementById("con");
            switch (event.type){
                case "touchstart":
//		                	document.addEventListener('touchstart', touch1, false);
                    var touch = event.targetTouches[0];     //touches数组对象获得屏幕上所有的touch，取第一个touch
                    startPos = {x:touch.pageX,y:touch.pageY,time:+new Date};    //取第一个touch的坐标值
                    isScrolling = 0;   //这个参数判断是垂直滚动还是水平滚动
//
//		                    event.stopPropagation();
                    a=Math.round(event.touches[0].pageX);
                    e=Math.round(event.touches[0].pageY);
                    break;
                case "touchmove":

                    g=Math.round(event.touches[0].pageX);
                    d=Math.round(event.touches[0].pageY);
                    var touch = event.targetTouches[0];
                    w=g-a;
                    h=d-e;
                    isScrolling = Math.abs(w) < Math.abs(h) ? 1:0;
                    if(isScrolling === 0){
                        event.preventDefault();
                    }
                    console.log(w+","+h+","+isScrolling);
                    break;
                case "touchend":
                    b=Math.round(event.changedTouches[0].pageX);
                    c=a-b;
                    if(isScrolling === 0){
                        if (c<-100){
                            Left.onclick();

                        }
                        if (c>100){
                            Right.onclick();
                        }
                    }
//
            }
        }
    }

    document.addEventListener('goAll',function () {
        var qb = document.getElementById("qb");
        //模拟首页点击
        mui.trigger(qb,'tap');
        //切换选项卡高亮
        var current = document.querySelector(".banner>.pagNav>.cur");
        if(qb!==current){
            current.classList.remove('cur');
            qb.classList.add('cur');
        }
        n=0;
         list_con[n].style.height=document.getElementsByClassName("list_con")[n].clientHeight+"px";
//				list_con[n].style.height=1500+"px";
        Li[n].style.height=list_con[n].style.height;
        Ul.style.height=document.getElementsByClassName("list_con")[n].clientHeight+100+"px";
         banner.style.height=document.getElementsByClassName("list_con")[n].clientHeight+40+"px";
        console.log(list_con[n].style.height);
    });

    document.addEventListener('goPay',function () {
        console.log("123");
        var dfk = document.getElementById("dfk");
        //模拟首页点击
        mui.trigger(dfk,'tap');
        //切换选项卡高亮
        var current = document.querySelector(".banner>.pagNav>.cur");
        if(dfk!==current){
            current.classList.remove('cur');
            dfk.classList.add('cur');
        }
        n=0;
        Right.onclick();

    });

    document.addEventListener('goDfh',function () {
        console.log("123");
        var dfh = document.getElementById("dfh");
        //模拟首页点击
        mui.trigger(dfh,'tap');
        //切换选项卡高亮
        var current = document.querySelector(".banner>.pagNav>.cur");
        if(dfh!==current){
            current.classList.remove('cur');
            dfh.classList.add('cur');
        }
        n=1;
        Right.onclick();

    });

    document.addEventListener('goDsh',function () {
        console.log("123");
        var dsh = document.getElementById("dfh");
        //模拟首页点击
        mui.trigger(dsh,'tap');
        //切换选项卡高亮
        var current = document.querySelector(".banner>.pagNav>.cur");
        if(dsh!==current){
            current.classList.remove('cur');
            dsh.classList.add('cur');
        }
        n=2;
        Right.onclick();

    });
    document.addEventListener('goDpj',function () {
        console.log("123");
        var dpj = document.getElementById("dpj");
        //模拟首页点击
        mui.trigger(dpj,'tap');
        //切换选项卡高亮
        var current = document.querySelector(".banner>.pagNav>.cur");
        if(dpj!==current){
            current.classList.remove('cur');
            dpj.classList.add('cur');
        }
        n=3;
        Right.onclick();

    });


</script>
</body>
</html>
